<template>
	<view class="content">
		<view class="form-con">
			<view class="cu-form-group">
				<input maxlength="11" placeholder="请输入店铺名称" v-model="shopName" name="input" type="text"></input>
			</view>
			<view class="cu-form-group">
				<input maxlength="11" placeholder="请输入店主姓名" v-model="name" name="input" type="text"></input>
			</view>
			<view class="cu-form-group">
				<input maxlength="11" placeholder="请输入联系电话" v-model="tel" name="input" type="number"></input>
			</view>
			<view class="cu-form-group">
				<input placeholder="请输入验证码" v-model="memo1" name="input"></input>
				<button @tap="getSendMessages" :disabled="codeDisabled" class='cu-btn bg-green shadow'>{{getCodeText}}</button>
			</view>
			<view class="cu-form-group">
				<input placeholder="请输入店铺地址" v-model="addr" name="input" type="text" @tap="address"></input>
			</view>
			<view class="certifica-uploadimg">
				<view class="title"> ......身份证...... </view>
				<view class="text-center">
					<view class="flex" >
						<view class="solids" @tap="ChooseImage(1)" >
							<image mode="scaleToFill" :src="cardAimg"></image>
							<view class="title1">
								身份证正面
							</view>
						</view>
						<view class="solids" @tap="ChooseImage(2)">
							<image mode="scaleToFill" :src="cardBimg"></image>
							<view class="title1">
								身份证反面
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="certifica-uploadimg">
				<view class="title"> ......店铺照片...... </view>
				<view class="text-center image-con">
					<view class="flex" >
						<view class="solids" @tap="ChooseImage(3)" >
							<image mode="scaleToFill" :src="cardCimg"></image>
						</view>
						<view class="solids" @tap="ChooseImage(4)">
							<image mode="scaleToFill" :src="cardDimg"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="flex flex-direction login-btn">
				<button class="cu-btn bg-red margin-tb-sm lg" @tap="goReview">提交审核</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {getShopByUserId, sendMessages, shopadd} from '@/api/index.js';
	import config from "@/config/index.js"
	var sourceType = [
	    ['camera'],
	    ['album'],
	    ['camera', 'album']
	]
	var sizeType = [
	    ['compressed'],
	    ['original'],
	    ['compressed', 'original']
	]
	export default {
		data() {
			return {
				tel:"",//手机号
				getCodeText:'获取验证码',
				codeDisabled:false,//发送验证码是否禁止
				memo1:"",
				shopName:"",
				name:"",
				addr:"",
				checkbox: [{//复选框
					value: 'A',
					checked: false
				}],
				cardAimg:'../../static/images/addPic.png',
				cardBimg:'../../static/images/addPic.png',
				cardCimg:'../../static/images/addPic.png',
				cardDimg:'../../static/images/addPic.png',
				id:0
			}
		},
		onLoad(opsticon) {
			var {id}= opsticon 
		getShopByUserId({}).then(res=>{
				if(id==1){
					console.log(res.idcardFront)
					this.cardAimg =res.idcardBack //身份证正面
					this.cardBimg = res.idcardFront//身份证反面
					this.addr =res.address
					this.shopName = res.shopName
					this.name = res.shopOwnerName
					this.tel = res.tel
					this.id = res.id
				}else if(res!=null){
					if(res.review == -1) {
						uni.redirectTo({
							url: 'submit_review?id=-1&str=待审核，请耐心等待...'
						})
					}else if(res.review == 0) {
						uni.redirectTo({
							url: 'submit_review?id=0&str=审核通过'
						})
					}else if(res.review == 1) {
						var remarks1 = res.remarks1
						uni.redirectTo({
							url: 'submit_review?id=1&str=审核未通过&remarks1='+remarks1
						})
					}else if(res.review == 2) {
						uni.redirectTo({
							url: 'submit_review?id=2&str=店铺冻结'
						})
					}

				}
				
			})
		},
		methods: {
			//获取地址
			address() {
				let _this = this
				uni.chooseLocation({
					success: function (res) {
						console.log(res)
						_this.addr = res.address
					},
					fail: function (ress) {
						console.log(ress)
						uni.getSetting({
							success: function(res) {
								var statu = res.authSetting;
								if (!statu['scope.userLocation']) {
									uni.showModal({
										title: '是否授权当前位置',
										content: '需要获取您的地理位置，请确认授权，否则地图功能将无法使用',
										success: function(tip) {
											if (tip.confirm) {
												uni.openSetting({
													success: function(data) {
														if (data.authSetting["scope.userLocation"] === true) {
															uni.showToast({
																title: '授权成功',
																icon: 'success',
																duration: 1000
															})
															//授权成功之后，再调用chooseLocation选择地方
															uni.chooseLocation({
																success: function(res) {
																	_this.addr = res.address
																},
															})
														} else {
															uni.showToast({
																title: '授权失败',
																icon: 'none',
																duration: 1000
															})
														}
													}
												})
											}
										}
									})
								}
							},
							fail: function(res) {
								uni.showToast({
									title: '调用授权窗口失败',
									icon: 'none',
									duration: 1000
								})
							}
						})
					}
				})
			},
			//获取验证码
			getSendMessages(){
				let that=this;
				let tel=this.tel;
				//验证手机号码
				if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(tel))){ 
					that.$api.msg('请填写正确手机号码');
					that.logining = false;
					return false; 
				}
				that.getCodeText = "发送中...";
				that.codeDisabled=true;
				sendMessages({tel: tel}).then(re =>{
					console.log(re)
					if(re===null) {
						setTimeout(()=>{
							that.$api.msg('验证码已发送');
							that.setTimer();
						},1000)	
					}else {
						that.logining=false;
						that.codeDisabled=false;
					}
					
				})
			},
			//审核
			goReview(){
				let that=this;
				let shopTel = that.tel;//电话
				let code  =that.memo1;//验证码
				let IDCardBack = that.cardAimg//身份证正面
				let IDCardFront  = that.cardBimg//身份证反面
				let shopPictures1  = that.cardCimg//店铺照片1
				let shopPictures2  = that.cardDimg//店铺照片2
				let shopOwnerName = that.name//店主姓名
				let shopName = that.shopName //店铺名
				let shopAddress = that.addr//店铺地址
				let id = that.id
				if(id==0){
					id = null
				}
				that.logining=true;
				
				if(!that.validation(shopTel,shopName,code,shopOwnerName,shopAddress,IDCardBack,IDCardFront,shopPictures1,shopPictures2)){
					that.logining=false;
					return false;
				}
				
				if(that.logining){
					shopadd({
						IDCardBack : IDCardBack,
						IDCardFront : IDCardFront,
						code : code,
						shopAddress : shopAddress,
						shopName : shopName,
						shopOwnerName : shopOwnerName,
						shopPictures1 : shopPictures1,
						shopPictures2 : shopPictures2,
						shopTel : shopTel,
						id : id
					}).then(res=>{
						uni.redirectTo({
							url: 'submit_review?id=-2&str=审核提交成功，请耐心等待...'
						})
					})
				}
				
				
				
			},
			//选择图片
			ChooseImage: async function(type) {
			    // #ifdef APP-PLUS
			    // #endif
			    uni.chooseImage({
				    sourceType: ['album','camera'],
					sizeType: ['compressed'], 
			        count: 1,
			        success: (res) => {
						console.log(res)
						var that=this;
						var tempFilePaths = res.tempFilePaths[0];
						console.log(tempFilePaths)
						uni.uploadFile({
							url: config.requestUrl+'/uploadCt/uploadImg',
							filePath: tempFilePaths,
							name: 'file',
							method:'POST',
							header:{
								'Content-Type': 'application/x-www-form-urlencoded',
							},
							success: (res) => {
								let imgSrc= res.data.split(',')[2].split('"')[5]

								console.log(imgSrc)
								if(type==1){
									that.cardAimg=imgSrc;
									console.log(that.cardAimg);
								}else if(type==2){
									that.cardBimg=imgSrc;
									console.log(that.cardBimg);
								}else if(type==3){
									that.cardCimg=imgSrc;
								}else if(type==4){
									that.cardDimg=imgSrc;
								}
							},
							fail:(err) => {
								console.log(err)
							}
						})
			        },
			        fail: (err) => {
			            // #ifdef APP-PLUS
						console.log(err)
			            if (err['code'] && err.code !== 0 && this.sourceTypeIndex === 2) {
			                this.checkPermission(err.code);
			            }
			            // #endif
			        }
			    })
			},
			async checkPermission(code) {
			    let type = code ? code - 1 : this.sourceTypeIndex;
			    let status = permision.isIOS ? await permision.requestIOS(sourceType[type][0]) :
			        await permision.requestAndroid(type === 0 ? 'android.permission.CAMERA' :
			            'android.permission.READ_EXTERNAL_STORAGE');
			
			    if (status === null || status === 1) {
			        status = 1;
			    } else {
			        uni.showModal({
			            content: "没有开启权限",
			            confirmText: "设置",
			            success: function(res) {
			                if (res.confirm) {
			                    permision.gotoAppSetting();
			                }
			            }
			        })
			    }
			
			    return status;
			},
			//短信倒计时
			setTimer(){
				let holdTime = 60;
				this.getCodeText = "重新获取(60)"
				this.Timer = setInterval(()=>{
					if(holdTime<=0){
						this.getCodeBtnColor = "#ffffff";
						this.getCodeText = "获取验证码";
						this.codeDisabled=false;
						clearInterval(this.Timer);
						return ;
					}
					this.getCodeText = "重新获取("+holdTime+")"
					holdTime--;
					
				},1000)
			},
			//验证
			validation(tel,pUserName,memo1,shopOwnerName,shopAddress,cardAimg,cardBimg,cardCimg,cardDimg) {
				var pictureCode =this.pictureCode;
				if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(tel))){
					this.$api.msg('请输入正确手机号码');
					return false; 
				}
				if(pUserName===''){
					this.$api.msg('请输入店铺名');
					return false; 
				}
				if(memo1===''){
					this.$api.msg('请输入验证码');
					return false; 
				}
				if(shopOwnerName===''){
					this.$api.msg('请输入店主姓名');
					return false;
				}
				if(shopAddress===''){
					this.$api.msg('请输入店铺地址');
					return false;
				}
				if(cardAimg === '../../static/images/addPic.png'){
					this.$api.msg('请上传身份证正面照片');
					return false;
				}
				if(cardBimg === '../../static/images/addPic.png'){
					this.$api.msg('请上传身份证反面照片');
					return false;
				}
				if(cardCimg === '../../static/images/addPic.png'){
					this.$api.msg('请上传店铺照片');
					return false;
				}
				if(cardDimg === '../../static/images/addPic.png'){
					this.$api.msg('请上传店铺照片');
					return false;
				}
				return true;
			},
			CheckboxChange() {//复选框切换选中
				this.checkbox[0].checked = !this.checkbox[0].checked
			},
		}
	}
</script>

<style>
	page{background: #ffffff!important;}
	/* .content{padding:0 56rpx;} */
	.form-con{width:100%;/* margin-top:44rpx; */}
	.content{display: flex;flex-direction: column;align-items: center;}
	.cu-form-group{border-bottom: 1px solid #efefef;border-top:0!important}
	/* .login-btn{margin-top:172rpx;} */
	.login-btn button{
		border-radius: 58rpx!important;
		background: url("../../static/images/band-card.png") no-repeat;
		background-size: 100% 100%;
		color: #fff;	
		width:600rpx;
		height:80rpx;
		margin:46rpx auto;
		line-height: 80rpx;
		text-align: center;
		font-size: 28rpx;}
	.text{margin-top:20rpx;}
	.text text{color: #FF9800;}
	.bg-green{background: none;box-shadow: none;border:0;color: #FF5454;height:60rpx;}
	.certifica-uploadimg .title{color: #101010;font-size: 28rpx;padding:60rpx;text-align: center;}
	.solids{border-radius: 10rpx;height:200rpx;width:300rpx;margin:0 36rpx 16rpx;}
	.solids image{border-radius: 10rpx;height:200rpx;width:300rpx;}
	.title1{font-size: 24rpx;color: #666666;margin-top:16rpx;}
</style>
